	<template>
		<div class="query">
		<div class="query-search">
			<van-search
			v-model="searchValue"
			placeholder="请输入搜索关键词"
			show-action
			@search="getgoodsList"
			>
			<div slot="action" style="color:#666!important;
	" @click="onSearch">搜索</div>
			</van-search>
		</div>
		<div class="query-content">

			<van-list
			v-model="loading"
			:finished="finished"
			@load="getgoodsList"
			>

			<!--没有数据-->
			<div class="no-cart" v-if="typeof goodsList == 'string'" style="color:#ccc;padding:20px 0;">
				<span>{{goodsList}}</span>
			</div>

			<!--<van-row v-else>-->
				<!--<van-col offset="1" span="12" style="background: #fff;margin:4px 2px ;border-radius: 3px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border:1px solid;" v-for="(item,index) in goodsList" :key="index" @click.native="shopDetailsFn(item)">-->
				<!--<img v-if="item.item.images" :src="$http.IMGURL+item.item.images" style="width:100%;height:177px;" alt="">-->
				<!--<img v-else src="../../../assets/noimg.jpg"  style="width:100%;height:177px;" alt="">-->
				<!--<p style="margin:5px 0;width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: left;">{{item.item.title}}</p>-->
				<!--<p style="margin:0;text-align: left;font-size:16px;font-weight: bold;color:#F37015">￥{{item.item.price}}</p>-->
				<!--</van-col>-->
			<!--</van-row>-->


        <el-row :gutter="2" v-else>
          <el-col :xs="12" :sm="8" v-for="(item,index) in goodsList" :key="index">
            <div class="goodsitem" @click="shopDetailsFn(item)">
              <div class="img">
                <img v-if="item.item.images != ''" :src="$http.IMGURL+item.item.images" />
                <img v-else src="http://res2.esf.leju.com/esf_www/statics/images/default-img/detail.png"/>
              </div>
              <div class="text">
                <p class="titless">{{item.item.title}}</p>
                <div class="attrs">
                  <div class="price">￥<span>{{item.item.price}}</span></div>
                </div>
                <!-- <p class="comment">
                                    <span>1条评价</span><span>90%好评</span>
                                </p> -->
              </div>
            </div>
          </el-col>
        </el-row>
			</van-list>

			<p v-show="block" style="color:#ccc;text-align: center;padding:10px 0;">商品已加载完毕！</p>
		</div>


		<!--回到顶部-->
		<backTop></backTop>
		</div>
	</template>

	<script>
	import backTop from "@/components/backTop/index";
	import { mapState } from 'vuex';
	import axios from 'axios';
		export default {
			name: "query",
		data(){
			return {
				active:0,
				searchValue:'',
				tenant_id:1,
				list:['综合','最新','销量','价格↑','价格↓'],
				content:'综合',
				goodsList:[],
				loading: false,
				finished: false,
				block:false,
				page:1,
				pagesize:10,
			}
		},
		components:{
			backTop
		},
		computed: {
			...mapState('shop',{
			details:"data",
			sever:'sever'
			})
		},
		watch:{
			active(val){

			if(val == 0){
				// console.log(val)
			}else if(val == 1){
				// console.log(val)
			}else if(val == 2){
				// console.log(val)
			}else if(val == 3){
				// console.log(val)
			}else{
				// console.log(val)
			}
			}
		},
		methods:{
			// 搜索
			onSearch(){
			this.page = 1;
			this.goodsList =[];
			this.loading = true
			this.finished = false
			this.getgoodsList();
			},
			//商品列表
			getgoodsList(itemId){
				var $this = this;
				var itemIds =  [];
				if(itemId){
					itemIds.push(itemId)
				}
				this.$http.item.get('stock/search',{
					params:{
						keyword:$this.searchValue,
						page:$this.page,
						pagesize:$this.pagesize,
						category_ids:itemIds
					}
				}).then((res)=>{
					// console.log(res.data.data)
					if(!res.data.code){//goodsList

						$this.page = res.data.data.list.current_page+1;
						var discount = parseFloat($this.getCookie('discount'))
						// console.log(discount)
						for(var i =0;i<res.data.data.list.data.length;i++){
						res.data.data.list.data[i].item.price = (parseFloat(res.data.data.list.data[i].item.price)*(discount/10)).toFixed(2);

							$this.goodsList.push(res.data.data.list.data[i]);
						}

						$this.loading = false;
						if(!$this.goodsList.length){
						$this.finished = true;
						$this.goodsList = '暂无相关商品！';
						}else if ($this.goodsList.length >= res.data.data.list.total) {
						$this.finished = true;
						$this.block = true
						}
					}
					}).catch((err)=>{
					console.log(err)
				})
			},
			// 筛选
			queryFn(text){
				// console.log(this.active)
				this.content = text;
			},
			//跳转到详情
			shopDetailsFn(obj){
				this.$router.push({
					name: "shop_goodsinfo",
					params:{
						storeid : obj.store_id,
						itemid : obj.item_id,
						goodsid : obj.goods_id
					}
				});
			},
	//获取cookie
			getCookie (cname) {
			var name = cname + "=";
			var ca = document.cookie.split(';');
			for (var i = 0; i < ca.length; i++) {
				var c = ca[i];
				while (c.charAt(0) == ' ') c = c.substring(1);
				if (c.indexOf(name) != -1){
				return c.substring(name.length, c.length);
				}
			}
			return "";
			},
		},
		mounted(){
			  // console.log(this.shop.details)
			var item_id = this.$route.params.item_id;
			var keywords = this.$route.params.kaywords;
			if(item_id){
				this.page = 1;
				this.goodsList =[];
				this.loading = true
				this.finished = false
				this.getgoodsList(item_id);
			} else if (keywords) {
			  this.searchValue = keywords
      }
		}
		}
	</script>

	<style scoped>
	.query-search{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		z-index: 99999!important;
	}
	.query-content{
		margin-top:55px;
	}
    .no-cart{
      text-align: center;
    }
  .goodsitem {
    background: #fff;
    margin: 4px 2px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
  }
  .goodsitem>.img{
    height:200px;
  }
  .goodsitem>.img>img{
    display: block; height:100%; width:100%;
  }
  .titless {
    font-size: 12px;
    color: #606266;
    line-height: 19px;
    height: 19px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .goodsitem .text .attrs .price {
    font-family: Arial;
    font-size: 12px;
    color: #F56C6C;
  }
	</style>
